<template>
  <section>
    <el-container>
      <el-header>
        <systemMenuSearch :search="search" :filters="filters" :add="add"/>
      </el-header>
      <el-main>
        <el-row style="margin-top: 20px">
          <el-col :span="6">
            <el-tree :data="sheet.rows" @node-click="handleNodeClick"  default-expand-all>
              <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => killSystemMenuInfo(node, data)">
            删除
          </el-button>
        </span>
      </span>

            </el-tree>

          </el-col>
          <el-col :span="18">
            <el-form ref="form" :model="row" label-width="120px" align="left">

              <el-form-item label="名称"
                            prop="label"
                            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
                <el-input v-model="row.label" placeholder="请输入"/>
              </el-form-item>

              <el-form-item label="上级">
                <el-input v-model="row.parentName" readonly placeholder="请输入"/>
              </el-form-item>

              <el-form-item>
                <el-button type="warning" @click="submitForm" icon="el-icon-plus">添加</el-button>

                <el-button   @click="upMove" icon="el-icon-plus">上移</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
      <lsz-pagination :getList="getList" :sheet="sheet"/>
    </el-container>

  </section>
</template>

<script>
  import LszPagination from '@/components/common/lsz-pagination.vue';
  import SystemMenuSearch from './SystemMenuSearch.vue';
  import {dataToTree, treeToRows, upMoveTree} from '@/common/util/TreeUtil.js'

  let data = () => {
    return {
      filters: {},
      sheet: {
        rows: [],
        total: 0,
        pageNum: 1,
        pageSize: 11111,
        sort: 'weight,createTime',
        order: 'desc',
        loading: false
      },
      row: {},
      node:{}
    }
  }
  let getList = function () {
    let param = {
      pageNum: this.sheet.pageNum,
      pageSize: this.sheet.pageSize,
      sort: this.sheet.sort,
      order: this.sheet.order,
      query: this.filters
    }
    this.sheet.loading = true
    this.$http.post('/systemMenuController/getSystemMenuList', param).then(res => {
      let response = res.data.data;

      this.sheet.total = response.total
      this.sheet.rows = dataToTree(response.content)
      this.sheet.loading = false
    }).catch(() => this.sheet.loading = false)
  }

  export default {
    data: data,
    components: {
      LszPagination,
      SystemMenuSearch,
    },
    methods: {
      handleNodeClick(data) {
        this.row.parentId = data.id
        this.$set(this.row, 'parentName', data.label)
        this.node = data;

      },
      search: function () {
        this.sheet.pageNum = 1
        this.getList()
      },
      handleCommand: function (param) {
        this[param.method](param.args)
      },
      tableRowStyle({row, rowIndex}) {
        if (row.color) {
          return 'color: ' + row.color;
        }
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.onSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      onSubmit: function () {
        let param = this.row;
        let vm = this;
        let url = '/systemMenuController/addSystemMenu';//this.isAdd ? '/systemMenuController/addSystemMenu' : '/systemMenuController/updateSystemMenu';

        vm.$http.post(url, param).then(res => {
          if (!res.data.success) {
            vm.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            });
            return
          }
          vm.isChange = true;
          vm.$message({
            type: 'success',
            message: '保存成功!'
          })
          vm.search();
        })
      },

      killSystemMenuInfo: function (node, row) {
        let vm = this;
        vm.$confirm('是否确认提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$http.post('/systemMenuController/deleteSystemMenu', {id: row.id}).then(res => {
            if (!res.data.success) {
              vm.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
              return
            }
            vm.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.search();
          })
        }).catch(() => {

        })
      },
      showSystemMenuInfo: function (row) {
        this.$refs.systemMenuEdit.show(row);
      },
      add: function () {
        this.$refs.systemMenuEdit.showAdd();
      },
      //上移
      upMove() {
        let rows = upMoveTree(this.sheet.rows, this.node);
        this.sheet.rows = dataToTree(rows)
        let vm = this;
        let url =   '/systemMenuController/updateList'  ;

        vm.$http.post(url, rows).then(res => {
          if (!res.data.success) {
            vm.$message({
              showClose: true,
              message: res.data.msg,
              type: 'error'
            });
            return
          }
          vm.$message({
            type: 'success',
            message: '保存成功!'
          })

        })


      },
      formatDate: function (d, format) {
        if (!d) {
          return "";
        }
        if (!format) {
          format = 'YYYY-MM-DD HH:mm:ss';
        }
        return this.$moment(d).format(format)
      },
      getList,
      sortChange: function (d) {
        this.sheet.sort = d && d.prop
        this.sheet.order = d && d.order && d.order.indexOf('asc') >= 0 ? 'ASC' : 'DESC'
        this.search()
      },
    },
    mounted: function () {
      this.search()
    },
    name: "SystemMenu"
  }
</script>

<style scoped>
</style>

